<template>
  <div class="calendar">
    <el-card>
      <!-- 排班日历 -->
      <el-calendar>
        <template slot="dateCell"
                  slot-scope="{ data}">
          <div @click="arrangeDialog(data)">

            {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}

            <div v-for="(item, index) in calendarData"
                 :key="index">
              <div v-if="data.day == item.day"
                   class="content">
                已有{{item.num}}条排班
              </div>
            </div>
            <!-- <p>已有x条排班</p> -->
          </div>
        </template>
      </el-calendar>

      <!-- 排班对话框 -->
      <el-dialog title=""
                 :visible.sync="arrangeDialogVisible"
                 @close="arrangeDialogClosed"
                 width="45%">

        <!-- 每日排班内容主体区 -->
        <el-tabs v-model="activeName"
                 @tab-click="handleClick">
          <el-tab-pane name="0">
            <span slot="label"><i class="el-icon-sunrise"></i> 早班排班</span>
            <el-collapse v-model="activeNames">
              <!-- 现有排班表单展示 -->
              <el-collapse-item title="排班记录"
                                name="1"
                                style="margin-left:20px;">

                <el-table :data="this.arrangeForm.dataList"
                          size="small"
                          :header-cell-style="{ textAlign: 'center' }"
                          :cell-style="{ textAlign: 'center' }">
                  <el-table-column property="rounteName"
                                   label="巡逻路线"
                                   width="250"></el-table-column>
                  <el-table-column property="groupName"
                                   label="巡逻队伍"
                                   width="250"></el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <!-- 删除排班记录按钮 -->
                      <el-button v-has="'6493'"
                                 type="danger"
                                 icon="el-icon-delete"
                                 size="mini"
                                 @click="deleteRecordById(scope.row.id)"></el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-button v-has="'6492'"
                           type="success"
                           @click="quickArrangeDialogVisible=true"
                           style="margin-top:30px;margin-left:520px;"
                           size="medium">快速排班</el-button>

              </el-collapse-item>
              <!-- 添加排班记录 -->
              <el-collapse-item v-has="'6491'"
                                title="添加排班"
                                name="2"
                                style="margin-left:20px;">

                <el-form :inline="true"
                         :model="addSecurityArrangeForm"
                         ref="addSecurityArrangeFormRef"
                         style="margin-left:20px;">
                  <el-form-item label="路线"
                                prop="rounte">
                    <el-select v-model="addSecurityArrangeForm.rounteId"
                               placeholder="选择巡逻路线"
                               size="medium">
                      <el-option v-for="item in this.rounteList"
                                 :key="item.id"
                                 :label="item.name"
                                 :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="队伍"
                                prop="group">
                    <el-select v-model="addSecurityArrangeForm.groupName"
                               placeholder="选择队伍"
                               size="medium">
                      <el-option v-for="item in this.groupList"
                                 :key="item"
                                 :label="item+'组'"
                                 :value="item">
                      </el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item>
                    <el-button type="primary"
                               @click="addArrange"
                               size="medium">保存</el-button>
                  </el-form-item>
                </el-form>
              </el-collapse-item>
            </el-collapse>

          </el-tab-pane>
          <el-tab-pane name="1">
            <span slot="label"><i class="el-icon-sunny"></i> 午班排班</span>
            <el-collapse v-model="activeNames">
              <!-- 现有排班表单展示 -->
              <el-collapse-item title="排班记录"
                                name="1"
                                style="margin-left:20px;">

                <el-table :data="this.arrangeForm.dataList"
                          size="small"
                          :header-cell-style="{ textAlign: 'center' }"
                          :cell-style="{ textAlign: 'center' }">
                  <el-table-column property="rounteName"
                                   label="巡逻路线"
                                   width="250"></el-table-column>
                  <el-table-column property="groupName"
                                   label="巡逻队伍"
                                   width="250"></el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <!-- 删除排班记录按钮 -->
                      <el-button v-has="'6493'"
                                 type="danger"
                                 icon="el-icon-delete"
                                 size="mini"
                                 @click="deleteRecordById(scope.row.id)"></el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-button v-has="'6492'"
                           type="success"
                           @click="quickArrangeDialogVisible=true"
                           style="margin-top:30px;margin-left:520px;"
                           size="medium">快速排班</el-button>

              </el-collapse-item>
              <!-- 添加排班记录 -->
              <el-collapse-item v-has="'6491'"
                                title="添加排班"
                                name="2"
                                style="margin-left:20px;">

                <el-form :inline="true"
                         :model="addSecurityArrangeForm"
                         ref="addSecurityArrangeFormRef"
                         style="margin-left:20px;">
                  <el-form-item label="路线"
                                prop="rounte">
                    <el-select v-model="addSecurityArrangeForm.rounteId"
                               placeholder="选择巡逻路线"
                               size="medium">
                      <el-option v-for="item in this.rounteList"
                                 :key="item.id"
                                 :label="item.name"
                                 :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="队伍"
                                prop="group">
                    <el-select v-model="addSecurityArrangeForm.groupName"
                               placeholder="选择队伍"
                               size="medium">
                      <el-option v-for="item in this.groupList"
                                 :key="item"
                                 :label="item+'组'"
                                 :value="item">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary"
                               @click="addArrange"
                               size="medium">保存</el-button>
                  </el-form-item>
                </el-form>
              </el-collapse-item>
            </el-collapse>
          </el-tab-pane>
          <el-tab-pane name="2">
            <span slot="label"><i class="el-icon-moon"></i> 晚班排班</span>
            <el-collapse v-model="activeNames">
              <!-- 现有排班表单展示 -->
              <el-collapse-item title="排班记录"
                                name="1"
                                style="margin-left:20px;">

                <el-table :data="this.arrangeForm.dataList"
                          size="small"
                          :header-cell-style="{ textAlign: 'center' }"
                          :cell-style="{ textAlign: 'center' }">
                  <el-table-column property="rounteName"
                                   label="巡逻路线"
                                   width="250"></el-table-column>
                  <el-table-column property="groupName"
                                   label="巡逻队伍"
                                   width="250"></el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <!-- 删除排班记录按钮 -->
                      <el-button v-has="'6493'"
                                 type="danger"
                                 icon="el-icon-delete"
                                 size="mini"
                                 @click="deleteRecordById(scope.row.id)"></el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-button v-has="'6492'"
                           type="success"
                           @click="quickArrangeDialogVisible=true"
                           style="margin-top:30px;margin-left:520px;"
                           size="medium">快速排班</el-button>

              </el-collapse-item>
              <!-- 添加排班记录 -->
              <el-collapse-item v-has="'6491'"
                                title="添加排班"
                                name="2"
                                style="margin-left:20px;">

                <el-form :inline="true"
                         :model="addSecurityArrangeForm"
                         ref="addSecurityArrangeFormRef"
                         style="margin-left:20px;">
                  <el-form-item label="路线"
                                prop="rounte">
                    <el-select v-model="addSecurityArrangeForm.rounteId"
                               placeholder="选择巡逻路线"
                               size="medium">
                      <el-option v-for="item in this.rounteList"
                                 :key="item.id"
                                 :label="item.name"
                                 :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="队伍"
                                prop="group">
                    <el-select v-model="addSecurityArrangeForm.groupName"
                               placeholder="选择队伍"
                               size="medium">
                      <el-option v-for="item in this.groupList"
                                 :key="item"
                                 :label="item+'组'"
                                 :value="item">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary"
                               @click="addArrange"
                               size="medium">保存</el-button>
                  </el-form-item>
                </el-form>
              </el-collapse-item>
            </el-collapse>
          </el-tab-pane>

        </el-tabs>

      </el-dialog>

      <!-- 快速排班对话框 -->
      <el-dialog title="快速排班"
                 :visible.sync="quickArrangeDialogVisible"
                 @close="quickArrangeDialogClosed"
                 width="50%">
        <!-- 排班日历 -->
        <el-calendar>
          <template slot="dateCell"
                    slot-scope="{ data}">
            <div @click="addQuickArrangeList(data)">
              <p>
                {{ data.day.split('-').slice(1).join('-') }}
                {{quickArrangeList.indexOf(data.day)!=-1 ? '✔️':''}}
              </p>
            </div>
          </template>
        </el-calendar>

        <!-- 底部区域 -->
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="quickArrangeDialogVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="addQuickArrange">确 定</el-button>
        </span>
      </el-dialog>

    </el-card>
  </div>
</template>
<script>
import {
  getList,
  add,
  deleteSelected,
  deleteCurrent,
  getEditInfo,
  edit,
  getDetail,
  modifySwitch,
} from "@/api/logistics/logisticsGreen.js";
export default {
  data () {
    return {

      // 记录列表分页区的参数
      queryInfo: {
        //搜索条件
        query: "",
        // 当前页码
        pagenum: 1,
        //每页显示条数
        pagesize: 7,
      },
      total: 24,


      // 控制添加记录对话框的显示与隐藏
      addDialogVisible: false,
      // 添加记录的表单数据
      addForm: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      // 添加表单校验规则
      addFormRules: {},

      // 控制编辑当前日期的排班对话框的显示与隐藏
      arrangeDialogVisible: false,
      //查询到的当前日期的排班情况
      arrangeForm: {
        dataList: [{
          id: "1001",
          arrangeDate: "2019-6-19",
          workTime: "0",
          groupName: "第一组",
          rounteId: "1001"
        },
        {
          id: "1002",
          arrangeDate: "2019-6-19",
          workTime: "1",
          groupName: "第二组",
          rounteId: "1002"
        },
        {
          id: "1003",
          arrangeDate: "2019-6-19",
          workTime: "2",
          groupName: "第三组",
          rounteId: "1003"
        },],
      },


      //排班表单的校验规则
      arrangeFormRules: {},


      // 控制修改用户对话框的显示与隐藏
      editDialogVisible: false,
      // 查询到的用户信息
      editForm: {},
      // 编辑表单校验规则
      editFormRules: {},


      // 控制详细信息抽屉的显示与隐藏
      drawerVisible: false,
      // 详细信息的表单数据
      detailForm: {},
      // 被选中的记录id
      selectedList: [],

      //控制快速排班对话框的显示与隐藏
      quickArrangeDialogVisible: false,
      // 选中的快速排班的日期序列
      quickArrangeList: [],
      // 快速排班表单
      quickArrangeForm: {},


      // 当前日期的信息
      currentDayInfo: {},
      //当前选中班次，起始默认为0（早班）
      activeName: '0',
      // 添加排班记录表单
      addSecurityArrangeForm: {},
      //激活的手风琴
      activeNames: ['1'],
      // 巡逻路线列表
      rounteList: {},
      // 保安分组列表
      groupList: [],

      // 日历中的数据
      calendarData: [
        { day: "2021-12-03", num: "6", },
        { day: "2021-12-01", num: "8", },
      ],
    }
  },
  created () {
    this.getTableList();
  },
  methods: {

    //监听排班对话框关闭事件
    arrangeDialogClosed () {
      console.log("666")
      this.activeName = '0'
      this.$refs.addSecurityArrangeFormRef.resetFields()
    },
    addRecord () {

    },
    // 获取选中日期选中班次的排班列表信息
    async getTableList () {
      // 获取巡逻路线列表
      const { data: res0 } = await this.$http.get("SecurityrounteAction/getBasicInfos")
      if (!res0.success) return this.$message.error('获取巡逻路线列表失败')
      this.rounteList = res0.rows
      console.log(this.rounteList)
      // 获取保安分组列表
      const { data: res1 } = await this.$http.get("/SecuritygroupAction/getDisinctNames")
      if (!res1.success) return this.$message.error('获取分组列表失败')
      this.groupList = res1.rows
      console.log(this.groupList)

      // const { data: res } = await this.$http.get("xxxAction/getBasicInfos", { arrangeDate: this.currentDayInfo.day, workTime: this.activeName })
      // if (!res.success) return this.$message.error('获取排班信息失败')
      // this.arrangeForm.dataList = res.rows
      // console.log(res)

    },
    // 监听日历日期点击事件，记录当前点击日期
    async arrangeDialog (data) {
      // console.log(date)
      // console.log(data)
      this.currentDayInfo = data
      this.arrangeDialogVisible = true
      // 获取当前日期的排班记录
      this.queryInfo.condition = `arrangeDate = "${data.day}" and workTime="${this.activeName}"`
      const { data: res0 } = await this.$http.get("SecurityarrangeAction/getBasicInfos", { params: this.queryInfo })
      if (!res0.success) return this.$message.error('获取当前日期排班列表失败')
      this.arrangeForm.dataList = res0.rows
      console.log(this.arrangeForm.dataList)

    },
    // 监听快速排班对话框关闭事件
    quickArrangeDialogClosed () {
      this.quickArrangeList = []
    },
    // 提交新增排班记录
    // submitForm () {
    //   this.$refs.arrangeFormRef.validate(async valid => {
    //     if (!valid) return this.$message.error("存在排班信息未完善！请完善排班信息或删除该条排班记录")
    //     const { data: res } = await this.$http.post("xxxAction/addObject", { arrangeDate: this.currentDayInfo.day, workTime: this.activeName, rounteId: this.arrangeForm.domains[0].rounteId, groupName: this.arrangeForm.domains.groupName })
    //     if (!res.success) return this.$message.error('添加排班信息失败')
    //     this.$message.success('添加排班信息成功！')
    //     //重置arrangeForm.domains表单
    //     this.arrangeForm.domains = []
    //     // 重新获取排班列表数据
    //     this.getTableList()
    //   })
    // },
    resetForm () {
      this.$refs.arrangeFormRef.resetFields();
    },
    //删除当前排班记录
    async deleteRecordById (id) {
      // 弹框询问用户是否删除数据
      const confirmResult = await this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 如果用户确认删除，返回值为字符串confirm
      // 如果用户取消删除，返回值未字符串cancel
      // console.log(confirmResult)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除')
      }

      const { data: res } = await this.$http.post("SecurityarrangeAction/deleteByIds", { ids: id })
      if (!res.success) return this.$message.error('删除排班记录失败！')
      this.$message.success('删除排班记录成功！')
      // 重新获取记录列表数据
      this.arrangeDialog(this.currentDayInfo)

    },
    // 添加排班
    async addArrange () {
      this.$refs.addSecurityArrangeFormRef.validate(async valid => {
        if (!valid) return
        this.addSecurityArrangeForm.workTime = this.activeName
        this.addSecurityArrangeForm.arrangeDate = this.currentDayInfo.day
        // console.log(this.addSecurityArrangeForm)
        const { data: res } = await this.$http.post("SecurityarrangeAction/addObject", this.addSecurityArrangeForm)
        if (!res.success) return this.$message.error('添加失败')
        this.$message.success('添加记录成功！')
        // 重新获取记录列表数据
        this.arrangeDialog(this.currentDayInfo)


      })
    },
    //添加快速排班序列
    addQuickArrangeList (data) {
      this.quickArrangeList.push(data.day)
      console.log(this.quickArrangeList)
    },
    //确认添加快速排班
    async addQuickArrange () {
      console.log(this.arrangeForm.dataList)
      for (let i = 0; i < this.quickArrangeList.length; i++) {
        for (let j = 0; j < this.arrangeForm.dataList.length; j++) {
          this.quickArrangeForm.workTime = this.arrangeForm.dataList[j].workTime
          this.quickArrangeForm.groupName = this.arrangeForm.dataList[j].groupName
          this.quickArrangeForm.rounteId = this.arrangeForm.dataList[j].rounteId
          this.quickArrangeForm.arrangeDate = this.quickArrangeList[i]
          const { data: res } = await this.$http.post("SecurityarrangeAction/addObject", this.quickArrangeForm)
          if (!res.success) return this.$message.error(this.quickArrangeForm.arrangeDate + '排班失败！')
          this.$message.success(this.quickArrangeForm.arrangeDate + '排班成功')
        }
      }
      //重置快速排班序列
      // this.quickArrangeList=[]
      // 关闭快速排班对话框
      this.quickArrangeDialogVisible = !this.quickArrangeDialogVisible
    },
    // 新增排班
    // addDomain () {
    //   if (this.arrangeForm.domains.length > 0)
    //     return this.$message.error("请完善并提交上一条排班信息！")
    //   this.arrangeForm.domains.push({
    //     value: '',
    //     rounteId: '',
    //     groupName: '',
    //     key: Date.now()
    //   });
    // },
    // 监听选项卡点击事件,记录当前排班班次
    handleClick (tab, event) {
      console.log(tab);
      this.activeName = tab.name
      this.getTableList()
      console.log(this.activeName);

      this.addSecurityArrangeForm.workTime = tab.name
      this.arrangeDialog(this.currentDayInfo)

    },

  }

}


</script>
<style scoped>
.el-table {
  font-size: 13px;
}
.el-pagination {
  text-align: left;
  padding-top: 20px;
}
.content {
  color: #1989fa;
  font-size: 8px;
}
.calendar /deep/ .el-calendar-table .el-calendar-day {
  height: 65px;
}
</style>